<template>
    <view>
        <view class="recom space-between flex-wrap pt-12" v-if="list.length > 0">
            <view
                class="room-list mt-16 br-16"
                v-for="item in list"
                :key="item.id"
                @click="toDetail(item)"
            >
                <view class="room-list-img over-hide">
                    <view class="tag center ft-24 t-w br-10 pl-12 pr-12">热销</view>
                    <hj-image :img="item.coverImg" height="100%" width="100%" mode="aspectFill" />
                </view>
                <view class="room-list-info pl-20 pr-20 pt-12">
                    <view class="ft-28 t-3 text-over-1">{{ item.nameZh || '' }}</view>
                    <view class="ft-24 t-6 mt-6 text-over-1">
                        <text>{{ item.roomArea || '0' }}㎡</text>
                        <template v-if="item.bedTypeList.length">
                            <text> | </text>
                            <text v-for="(bed, i) in item.bedTypeList">
                                <template v-if="i > 0">/</template>
                                {{ bed.bedWidth || '0' }}
                            </text>
                            <text>米床</text>
                        </template>
                        <text v-if="item.breakfastCount">
                            | {{ item.breakfastCount || '0' }}份早餐
                        </text>
                    </view>
                    <view class="space-between mt-20">
                        <view class="c-m price">
                            <text class="ft-24">￥</text>
                            <text class="ft-34 bold">{{ item.sellPrice || '-' }}</text>
                            <text class="ft-22 ml-6">起</text>
                        </view>
                        <view class="but center ft-28 t-w br-10">预订</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="pb-30"></view>
    </view>
</template>

<script setup>
/**
 * @description 首页推荐房型
 * @author yinzhi
 * @date 2025-05
 */
import { defineComponent } from 'vue'
defineComponent({
    name: 'RecomRoom'
})
defineProps({
    list: {
        type: Array,
        default: () => []
    }
})

// 跳转房型详情页
const toDetail = item => {
    uni.navigateTo({
        url: `/pages/hotel/hotel-details/index?roomId=${item.id}`
    })
}
</script>

<style scoped lang="scss">
.room-list {
    width: 49%;
    height: 424rpx;
    background: $uni-bg-color;
    box-shadow: 0 0 8rpx 0 rgba($color: #000000, $alpha: 0.08);
    &-info {
        .price {
            height: 48rpx;
            line-height: 48rpx;
        }
        .but {
            height: 48rpx;
            background: $uni-color-primary;
            padding: 0 20rpx;
            line-height: 1;
        }
    }
    &-img {
        height: 240rpx;
        border-radius: 16rpx 16rpx 0 0;
        position: relative;
        .tag {
            position: absolute;
            left: 10rpx;
            top: 10rpx;
            z-index: 9;
            background: $uni-color-primary;
            height: 36rpx;
            line-height: 1;
        }
    }
}
</style>
